<script setup>
import { ref } from 'vue'

const props = defineProps({
  modelValue: String,//没有参数的v-model绑定后默认为modelVlue
  modelModifiers: { default: () => ({}) },
  title:null
})

const emit= defineEmits(['update:modelValue','update:title'])
// console.log(props.modelModifiers);
const inputChange=(e)=>{
  let value = e.target.value
  if (props.modelModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1)
  }
  emit('update:modelValue', value)
}
const inputChange2=(e)=>{
  let value = e.target.value
  if (props.modelModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1)
  }
  emit('update:title', value)
}
</script>
<template>
  <div>
    <!-- 事件练习 -->
    <input
    type="text"
    :value="modelValue"
    @input="inputChange"
  />
    <input
    type="text"
    :value="title"
    @input="inputChange2"
  />
  </div>
</template>